<template>
	<view class="nav" :style="navStyle">
		<u-navbar :title="title" :titleWidth="'80%'" :leftIconColor="leftIconColor" :bgColor="bgColor" :titleStyle="titleStyle" :border="border" placeholder :autoBack="autoBack" @rightClick="rightClick">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" :color="leftIconColor" size="20px" v-if="isShowLeft" />
			</view>
			<view class="u-nav-slot" slot="right">
				<slot name="right">
					<template v-if="rightType=== 'button'">
						<u-button :customStyle="rightBtnStyle">{{rightBtnName}}</u-button>
					</template>
					<template v-else-if="rightType === 'icon'">
						<u-icon :name="rightIconName" :color="rightIconColor" :size="rightIconSize" />
					</template>
				</slot>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: "custom-nav",
		props: {
			// 导航整体样式
			navStyle: {
				type: Object,
				default: () => ({})
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			leftIconColor: {
				type: String,
				default: '#2D3338'
			},
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 标题样式
			titleStyle: {
				type: [Object, String],
				default: () => ({
					fontSize: '16px',
					fontWeight: 'bold',
					color: '#2D3338'
				})
			},
			//是否显示左侧返回箭头
			isShowLeft: {
				type: Boolean,
				default: true
			},
			// 右侧类型
			rightType: {
				type: String,
				default: ''
			},
			// 右侧按钮名字
			rightBtnName: {
				type: String,
				default: ''
			},
			// 右侧按钮样式
			rightBtnCustomStyle: {
				type: Object,
				default: () => ({})
			},
			// 右侧图标名称
			rightIconName: {
				type: String,
				default: ''
			},
			// 右侧图标颜色
			rightIconColor: {
				type: String,
				default: ''
			},
			// 右侧图标大小
			rightIconSize: {
				type: [Number, String],
				default: ''
			},
			// 点击左侧区域(返回图标)，是否自动返回上一页
			autoBack: {
				type: Boolean,
				default: true
			},
			// 是否显示下边框
			border: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			// 右侧按钮样式
			rightBtnStyle() {
				return {
					height: '30px',
					background: '#3D8BFF',
					borderRadius: '4px',
					fontSize: '14px',
					color: '#FFFFFF',
					...this.rightBtnCustomStyle
				}
			}
		},
		methods: {
			// 右侧点击事件
			rightClick() {
				console.log("-rightClick-")
				this.$emit('rightClick')
			},
		}
	}
</script>